<!-- 分类子页面 筛选栏 -->
<template>
<div class="sub-filter" v-if="saleProperties.length">
    <div class="item" v-for="(item,index) in saleProperties" :key="item.id">
        <div class="head">{{ item.name }}：</div>
        <div class="body">
            <a 
            class="ellipsis"
            v-for="(list,listIndex) in item.properties"
            :key="listIndex"
            :class="{active:item.id === list.id}"
            href="javascript:;"
            :title="list.name"
            @click="changeFilter(item.name,list.name,list.id,index)"
            >{{ list.name }}</a>
        </div>
    </div>
</div>
</template>
<script>
export default{
    name:'SubFilter',
    props:{
        saleProperties:{
            type:Array,
            // default 必须是个方法
            default:()=>[]
        }
    },
    methods:{
        changeFilter(itemName,list,id,index){
            //向父组件发送事件消息
            this.$emit('changeFilter',{
                groupName:itemName,
                propertyName:list,
                index,
            },id);
        }
    },
    watch:{
        saleProperties:{
            handler(newData,oldData){
                console.log(oldData)
                console.log('-----------------')
                console.log(newData)
            }
        }
    }
}
</script>


<style lang="less" scoped>
.sub-filter {
	background: #fff;
	padding: 25px;
	.item {
		display: flex;
		.head {
			width: 80px;
			color: #999;
			line-height: 40px;
		}
		.body {
			flex: 1;
			a {
				margin-right: 36px;
				transition: all 0.3s;
				display: inline-block;
				max-width: 112px;
				line-height: 40px;
			}
			.active,
			a:hover {
				color: #27ba9b;
			}
		}
	}
}
</style>
